<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单新增type属性</title>
</head>
<body>
    <!-- autofocus: 自动获取焦点 -->
    <!-- autocomplete: 自动完成 
        1. 有on off: 打开、关闭 
        2. 需要满足必须提交过
        3. 必须有name属性 
    -->
    <!-- disabled: 禁止使用 -->
    <!-- readonly: 设置为只读，不可编辑 -->
    <!-- required: 必须输入该字段，否则会阻止表单事件提交 -->
    <!-- pattern: 正则表达式验证 -->
    <!-- multiple: 在file中支持同时上传多个文件；但是在email中支持上传多个邮箱但是必须以英文逗号分割 -->
    <form action="" id="myForm">
        用户名: <input type="text" name="username" placeholder="请输入用户名" autofocus autocomplete="on"> <br>
        密码: <input type="password" disabled> <br>
        手机号: <input type="tel" required pattern="^((?!1[0-9]{10}).)*$"> <br>
        邮箱: <input type="email" readonly> <br>
        数量: <input type="number" value="60" max="100" min="0"> <br>
        商品名称: <input type="search"> <br>
        范围: <input type="range" value="50" max="100" min="0"> <br>
        颜色: <input type="color"> <br>
        时间: <input type="time"> <br>
        日期: <input type="date"> <br>
        日期时间: <input type="datetime"> <br>
        日期时间: <input type="datetime-local"> <br>
        月份: <input type="month"> <br>
        星期: <input type="week"> <br>
        单选框: <input type="checkbox"> <br>
        复选框: <input type="radio"> <br>
        文件：<input type="file" name="file" multiple>
        <input type="submit">
    </form>

    <!-- 非放在form表单内的输入框也可以通过指定form id将数据绑定在form中提交 -->
    非form表单: <input type="text" name="NoInForm" form="myForm">
</body>
</html>
